import React, { useMemo, useState, useEffect } from 'react';
import { Form, Input, message } from 'antd';
import { useRequest } from '@/hooks';
// import { genID } from '@/pages/WorkFlow/utils';
import Difference from '@/pages/WorkFlow/components/FormControls/components/Difference';
import { getPostApplyData } from './service';

import styles from './style.less';

const HistoryDeffContent = ({ form, type, process }) => {
    const { getFieldDecorator, setFieldsValue } = form;
    const [approveData, setApproveData] = useState(null);
    const [compareDataMap, setCompareDataMap] = useState({});
    // const [dimensionDiffData, setDimensionDiffData] = useState({});

    const pageTitle = useMemo(() => {
        const { operationType } = approveData || {};
        if (operationType !== undefined && (type === 'OrgRankTypeApply' || type === 'OrgRankApply')) {
            const pageName = type === 'OrgRankTypeApply' ? '职级序列' : '职级';
            switch (operationType) {
                case 0:
                    return `新增${pageName}`;
                case 1:
                    return `编辑${pageName}`;
                case 2:
                    return `删除${pageName}`;
                default:
                    return '';
            }
        }
        return '';
    }, [approveData, type]);

    const fetchPostApplyDataSuccess = result => {
        const { code, data, msg } = result;
        if (code === 10000 && data) {
            setApproveData(data);
        } else {
            message.error(msg);
        }
    };

    const { run: fetchPostApplyData } = useRequest(id => getPostApplyData(id), {
        manual: true,
        onSuccess: fetchPostApplyDataSuccess
    });

    useEffect(() => {
        const { hiDataId = '' } = process?.detail?.formValueMap || {};
        if (hiDataId) {
            fetchPostApplyData(hiDataId);
        }
    }, [fetchPostApplyData, process]);

    const isPostRankType = useMemo(() => {
        if (type === 'OrgRankTypeApply') {
            return true;
        }
        return false;
    }, [type]);

    useEffect(() => {
        if (approveData) {
            const {
                rankName,
                rankValue,
                rankDesc,
                // rankDimensions = [], // 维度表格数据
                rankTypeName,
                rankTypeDesc,
                oldBusinessData, // 差异化数据源
                compareDataField // 差异化字段
            } = approveData?.operationType === 2 ? approveData?.oldBusinessData : approveData;

            const { updateFieldNames } = compareDataField || {};
            // const { add: tempAddData = [], delete: tempDeleteData = [], edit: tempEdit = [] } = seniorUpdateContent; // 变更的数据

            let formObj = {
                rankValue,
                rankDesc,
                rankName
                // rankDimensions: [...rankDimensions, ...tempDeleteData] // 新增的不往列表里面添加
            };

            if (isPostRankType) {
                formObj = {
                    rankTypeName,
                    rankTypeDesc
                };
            }

            setFieldsValue(formObj);

            // setDimensionDiffData({
            //     addArr: tempAddData,
            //     deleteArr: tempDeleteData,
            //     editArr: tempEdit
            // });

            // 将有变更的数据进行映射
            if (updateFieldNames && updateFieldNames?.length > 0) {
                const obj = {};
                updateFieldNames.forEach(item => {
                    obj[item] = oldBusinessData[item];
                });
                setCompareDataMap(obj);
            }
        }
    }, [approveData, isPostRankType, setFieldsValue]);

    // // 表格单元格是否修改
    // const colChangeText = (record, rowuuid, field) => {
    //     if (record && rowuuid && field) {
    //         let obj = {};
    //         const { editArr = [] } = dimensionDiffData;
    //         editArr.forEach(item => {
    //             const tempObj = JSON.parse(item);
    //             if (Object.keys(tempObj).includes(record[rowuuid])) {
    //                 obj = tempObj;
    //             }
    //         });
    //         const changeArr = Object.values(obj);
    //         const changeObj = changeArr.find(item => item[field]);
    //         if (changeObj) {
    //             return changeObj[field];
    //         }
    //         return undefined;
    //     }
    //     return undefined;
    // };

    // const columns = [
    //     {
    //         title: '维度',
    //         dataIndex: 'dimensionTypeName',
    //         width: '50%',
    //         render: (text, record) => (
    //             <Difference table tip={colChangeText(record, 'dimensionTypeCode', 'dimensionTypeName')}>
    //                 {text}
    //             </Difference>
    //         )
    //     },
    //     {
    //         title: '描述',
    //         dataIndex: 'demand',
    //         render: (text, record) => {
    //             const { dimensionTypeCode } = record;
    //             const { addArr = [], deleteArr = [] } = dimensionDiffData;
    //             return (
    //                 <Difference table tip={colChangeText(record, 'dimensionTypeCode', 'demand')}>
    //                     {text}
    //                     {deleteArr.find(item => item.dimensionTypeCode === dimensionTypeCode) && (
    //                         <Tag color="red" style={{ marginLeft: 5 }}>
    //                             删除
    //                         </Tag>
    //                     )}
    //                     {addArr.find(item => item.dimensionTypeCode === dimensionTypeCode) && (
    //                         <Tag style={{ marginLeft: 5 }} color="green">
    //                             新增
    //                         </Tag>
    //                     )}
    //                 </Difference>
    //             );
    //         }
    //     }
    // ];

    return (
        <div className={styles.rankHistory}>
            <div className={styles.rankFlowTitle}>{pageTitle}</div>
            <div className={styles.rankHistoryBox}>
                <Form layout="horizontal">
                    {isPostRankType && (
                        <Form.Item>
                            <Form.Item label="职级序列">
                                <Difference tip={compareDataMap?.rankTypeName}>
                                    {getFieldDecorator('rankTypeName')(<Input disabled placeholder="请输入职级序列" />)}
                                </Difference>
                            </Form.Item>
                            <Form.Item label="描述">
                                <Difference tip={compareDataMap?.rankTypeDesc}>
                                    {getFieldDecorator('rankTypeDesc')(
                                        <Input.TextArea
                                            disabled
                                            autoSize
                                            placeholder="请输入职级序列描述，不超过 1000 字"
                                        />
                                    )}
                                </Difference>
                            </Form.Item>
                        </Form.Item>
                    )}

                    {!isPostRankType && (
                        <Form.Item>
                            <Form.Item label="职级名称">
                                <Difference tip={compareDataMap?.rankName}>
                                    {getFieldDecorator('rankName')(<Input disabled placeholder="请输入职级名称" />)}
                                </Difference>
                            </Form.Item>
                            <Form.Item label="职级">
                                <Difference tip={compareDataMap?.rankValue}>
                                    {getFieldDecorator('rankValue')(<Input disabled placeholder="请输入字母与数字" />)}
                                </Difference>
                            </Form.Item>
                            <Form.Item label="描述">
                                <Difference tip={compareDataMap?.rankDesc}>
                                    {getFieldDecorator('rankDesc')(
                                        <Input.TextArea
                                            disabled
                                            autoSize
                                            placeholder="请输入职级描述，不超过 1000 字"
                                        />
                                    )}
                                </Difference>
                            </Form.Item>
                            {/* <Form.Item label="评定维度">
                                {getFieldDecorator('rankDimensions', {
                                    valuePropName: 'dataSource'
                                })(<Table columns={columns} pagination={false} rowKey={() => genID(6)} />)}
                            </Form.Item> */}
                        </Form.Item>
                    )}
                </Form>
            </div>
        </div>
    );
};

export default Form.create()(HistoryDeffContent);
